<template>
  <div>
    <div style="display: flex; flex-direction: row; justify-content: space-between">
      <div>标题</div>
      <div>
        <a> 自然周 </a>
        <a> 最近7天 </a>
      </div>
    </div>
    <div style="height: 240px">
      <ChartView ref="chartViewRef"></ChartView>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const chartViewRef = ref()

const markLineY = 80
const option = {
  /**
   * tooltip配置
   */
  tooltip: {},
  /**
   * 图例配置
   *
   * 要显示图例，series中的每个对象都必须配置name属性, 默认的图例文案就是name值
   */
  legend: {},
  /**
   * x坐标轴配置
   */
  xAxis: {
    /**
     * 坐标轴类型
     * 'value' 数值轴，适用于连续数据。
     * 'category' 类目轴，适用于离散的类目数据。
     * 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
     * 'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
     */
    type: 'category',
    /**
     * x轴数据
     */
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  /**
   * y坐标轴配置
   */
  yAxis: [
    {
      name: '产量',
      yAxisIndex: 0,
      type: 'value',
      // axisLabel: {
      //   //y轴每个刻度都加单位
      //   formatter: '{value}局',
      // },
      // 原始的y轴刻度线的最大值，就是数据值的最大值，为防止定格，将最大值在数据值的最大值基础上，再上调1.2倍
      max: function (value) {
        return parseInt(value.max * 1.2)
      },
    },
    {
      type: 'value',
      name: '良率(%)',
      min: 0, // 最小为0
      interval: 25, // 间隔25
      axisLabel: {
        //y轴每个刻度都加单位
        formatter: '{value}%',
      },
      // 原始的y轴刻度线的最大值，就是数据值的最大值，为防止定格，将最大值在数据值的最大值基础上，再上调1.2倍
      max: function (value) {
        return parseInt(value.max * 1.2)
      },
    },
  ],
  /**
   * 图表配置
   */
  series: [
    {
      name: '第一种',
      /**
       * 图表类型
       */
      type: 'bar',
      /**
       * 图表数据
       */
      data: [120, 200, 150, 80, 70, 110, 130],
      itemStyle: {
        //这里是重点
        color: function (params) {
          const { value } = params
          if (value <= markLineY) {
            return 'blue'
          } else {
            const p = 1 - markLineY / value
            // console.log(value, p)
            return {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'red', // 0% 处的颜色
                },
                {
                  offset: p,
                  color: 'red', // 0% 处的颜色
                },
                {
                  offset: p,
                  color: 'blue', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'blue', // 100% 处的颜色
                },
              ],
            }
          }
        },
      },
      markLine: {
        symbol: 'none',
        // label: {
        //   // show: false,
        //   position: 'middle', //将警示值放在哪个位置，start middle end 开头 中间 结尾
        //   // formatter: '60%', //警示线上显示内容
        // },
        //警示线的样式，虚实  颜色
        lineStyle: {
          type: 'solid',
          color: 'green',
        },
        //name警示线命名，type值有 max min average，
        // data: [{ name: '平均值', type: 'average' }],
        // 基于坐标轴的值设置一个特定位置
        data: [{ name: 'Y轴值为80的水平线', yAxis: markLineY }],
      },
    },
    {
      type: 'line',
      name: '完成率',
      data: [150, 10, 100, 90, 180, 70, 30],
      yAxisIndex: 1, // 1表示以右侧Y轴为基准
      symbolSize: 10, // 圆点大小
      lineStyle: {
        color: 'brown', //折线图线条颜色
      },
      label: {
        show: true,
        color: 'orange',
        formatter: '完成率:{c}%', // {c}数据值
      },
    },
  ],
}

onMounted(() => {
  chartViewRef.value.setOption(option)
})
</script>
